<template>
  <div class="profile-container">
    <Header></Header>
    <nav class="profile-nav">
      <ul>
        <li :class="{ active: currentTab === 'profileInfo' }" @click="selectTab('profileInfo')">个人资料</li>
        <li :class="{ active: currentTab === 'myBlogs' }" @click="selectTab('myBlogs')">我发表的博客</li>
        <li :class="{ active: currentTab === 'myActivities' }" @click="selectTab('myActivities')">我报名的活动</li>
        <li :class="{ active: currentTab === 'myLikes' }" @click="selectTab('myLikes')">我的点赞</li>
        <li :class="{ active: currentTab === 'myFavorites' }" @click="selectTab('myFavorites')">我的收藏</li>
      </ul>
    </nav>
    <div class="content">
      <div v-if="currentTab === 'profileInfo'">
        <UserProfile></UserProfile>
      </div>
      <div v-else-if="currentTab === 'myBlogs'">
        <button @click="addblog">新增</button>
        <PersonBlogList></PersonBlogList>
      </div>
      <div v-else-if="currentTab === 'myActivities'">
        <p>这里是我报名的活动内容...</p>
      </div>
      <div v-else-if="currentTab === 'myLikes'">
        <LikeBlog></LikeBlog>
      </div>
      <div v-else-if="currentTab === 'myFavorites'">
        <p>这里是我的收藏内容...</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from './Header.vue';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import PersonBlogList from './PersonBlogList.vue';
import UserProfile from './UserProfile.vue';
import LikeBlog from './LikeBlog.vue';
const currentTab = ref('profileInfo'); // 默认选中个人资料
const addblog = () => {
  router.push('/add-blog'); 
}
// 选择导航项
const selectTab = (tab) => {
  currentTab.value = tab; // 更新当前选中状态
};

</script>

<style lang="less" scoped>
.profile-container {
    padding: 20px;
  background-color: #f9f9f9;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.profile-nav {
  margin-bottom: 20px; 
}

.profile-nav ul {
  list-style-type: none; 
  padding: 0; 
  display: flex; 
  justify-content: center; 
}

.profile-nav li {
    
  margin-right: 20px; 
  cursor: pointer; 
  color: black; 
  text-align: center;
}

.profile-nav li.active {
  color: blue; 
  font-weight: bold; 
  text-decoration-line: underline;
  
}

.content {
  padding: 10px; 
  border: 1px solid #ccc; 
  border-radius: 5px;
  background-color: #fff; 
}
</style> 